<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全选全不选案例</title>
</head>
<body>
    <input type="checkbox" id="ck" />
		<hr />
		<div id="div">
			<input type="checkbox"/><br />
			<input type="checkbox" /><br />
			<input type="checkbox" /><br />
			<input type="checkbox" /><br />
			<input type="checkbox" />
		</div>
        <script type="text/javascript">
            // 1）给最上面的复选框绑定一个点击事件
            document.getElementById('ck').onclick = function () {
            // 2）当一点击最上面的复选框的时候立刻获取下面所有的复选框
            //this表示调用当前点击事件onclick的标签对象即最上面的复选框对象<input type="checkbox" id="ck" />
            let oDiv =document.getElementById('div');
            //下面所有的复选框
            let arrInputs = oDiv.children;
            //3）遍历获取下面每个复选框
        for (let i = 0; i < arrInputs.length; i++) {
            //每个复选框
            let oInput = arrInputs[i];
            //4）将最上面复选框此时checked的值赋值给下面每个复选框
            //this表示最上面复选框的标签对象，this.checked 表示最上面复选框的checked的值
            //最上面复选框的值是什么就将值赋值给下面每个复选框
            oInput.checked=this.checked;
        }
            }
        </script>
</body>
</html>